<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        .listContent .van-row .van-col {
            color: #fff;
        }

        .van-cell__right-icon {
            color: #e6c678;
        }

        .question {
            position: fixed;
            bottom: 140px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            text-align: center;
            line-height: 44px;
            background: #29292a;
            border: 1px solid #e6c678;
            color: #fff;
            font-size: 20px;
        }

        .add {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            text-align: center;
            line-height: 44px;
            background: #e6c678;
            color: #fff;
            font-size: 20px;
        }

        .search {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            text-align: center;
            line-height: 44px;
            background: #29292a;
            border: 1px solid #e6c678;
            color: #fff;
            font-size: 20px;
        }

        .van-popup {
            background-color: #090909;
        }

        .van-popup--bottom {
            border: 1px solid #e6c678;
        }

        .van-popup__close-icon--top-right {
            color: #e6c678;
        }

        .van-cell {
            background-color: transparent;
            color: #e6c678;
        }

        .van-popup--right {
            height: 100%;
            width: 40%;
        }

        .newField {
            height: 70%;
        }

        .van-popup--right .newBtn {
            height: 30%;
            width: 100%;
            display: flex;
        }

        .van-popup--right .newBtn .van-button {
            width: 80%;
            margin: auto;
        }

        .scanPop {
            width: 160px;
            height: 180px;
            text-align: center;
            background-color: transparent;
            margin: 0;
            padding: 0;
        }

        .van-icon-enlarge {
            font-size: 150px;
            color: #e6c678;
            margin: 0;
            padding: 0;
        }

        .inputClass {
            opacity: 0;
            width: 150px;
        }

        .scanLine {
            position: absolute;
            z-index: 2;
            width: 66%;
            height: 2px;
            transform: translateX(25%);
            background-color: #e6c678;
            animation: scanLineMove 2s infinite;
        }

        .newClass {
            color: red;
        }

        @keyframes scanLineMove {
            from {
                top: 30px;
            }

            to {
                top: 120px;
            }
        }

        #app {
            width: 100%;
            height: 100%;
        }

        #app .box {
            width: 100%;
            height: 98%;
            overflow-y: scroll;
        }

        .questionPop {
            display: flex;
            flex-direction: column;
        }

        .topQuestion {
            padding: 18px;
            display: flex;
        }

        .topQuestion .van-button {
            flex: 1;
            margin: 0 8px;
        }

        .table {
            padding: 0 18px;
            overflow: auto;
            flex: 1;
        }

        .van-col_one {
            color: orange;
            font-size: 18px;
        }

        .van-col_tow {
            color: grey;
            font-size: 18px;
        }

        .van-col_three {
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="listOnLoad">
                <van-cell-group>
                    <van-cell style="background-color: rgba(0, 0, 0, 0.9);" @click="intoRow(row)"
                        v-for="row in dataList" center>
                        <div class="listContent">
                            <van-row>
                                <van-col span="12"><span class="van-col_one">保养设备：{{row.EquipmentName}}
                                        {{row.EquipmentCode}}</span></van-col>
                            </van-row>
                            <van-row>
                                <van-col span="12">周期：{{row.cycle}} </van-col>
                                <van-col span="12">创建时间：{{row.createtime}}</van-col>
                            </van-row>
                            <van-row>
                                <van-col span="24">状态：
                                    <span
                                        :class="row.name=='待保养'?'van-col_one':row.name=='保养中'?'van-col_tow':'van-col_three'">
                                        {{row.name}}</span>
                                </van-col>

                            </van-row>
                        </div>
                    </van-cell>
                </van-cell-group>
            </van-list>
        </div>

        <!-- 疑问 -->
        <!-- <div class="question" @click="handlerQuestion">
            <van-icon name="question-o"></van-icon>
        </div> -->

        <!--添加 -->
        <!-- <div class="add" @click="addNew">
            <van-icon name="plus"></van-icon>
        </div> -->
        <div class="search" @click="showSearch = true">
            <van-icon name="search"></van-icon>
        </div>

        <van-popup v-model="showSearch" position="bottom">
            <div style="padding-bottom: 10px;">
                <van-cell title="设备名称:" :value="filterData.EquipmentName" readonly @click="openBaseScreen('搜索机台')">
                </van-cell>
                <van-cell title="保养周期:" :value="filterData.periodTypeName" readonly @click="periodTypeShow = true">
                </van-cell>
                <!-- <van-cell title="开始时间:" :value="filterData.FBDate" readonly @click="handlerTime('start')">
                </van-cell> -->
                <!-- <van-cell title="结束时间:" :value="filterData.FEDate" readonly @click="handlerTime('end')">
                </van-cell> -->
            </div>
            <div class="btn-padding">
                <van-button color="#e6c678" type="primary" block style="border-radius: 0;" @click="handlerSearch">
                    查 &nbsp &nbsp &nbsp &nbsp &nbsp 询
                </van-button>
            </div>
        </van-popup>

        <van-action-sheet v-model="periodTypeShow" :actions="periodTypeOptions" @select="onSelectPeriodType">
        </van-action-sheet>

        <van-popup v-model="showTime" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @confirm="confirmTime"
                @cancel="showTime = false"></van-datetime-picker>
        </van-popup>

        <van-popup v-model="scanShow" class="scanPop">
            <div class="scanLine"></div>
            <van-icon name="enlarge"></van-icon>
            <input id="autoInput" class="inputClass" inputmode="none" type="number" v-model="inputCode" ref="input"
                autofocus @keyup.enter="inputFocus()">
        </van-popup>

        <van-popup v-model="showNew" position="right">
            <div class="newField">
                <van-field v-model="newData.BillNO" label="保养编号：" readonly></van-field>
                <van-field v-model="newData.EquipmentName" label="机台：" readonly is-link @click="openBaseScreen('新增机台')">
                </van-field>
                <van-field v-model="newData.unKeepUserName" label="保养人员：" readonly is-link @click="handlerScan">
                </van-field>
            </div>

            <div class="newBtn">
                <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="saveAdd">
                    开始保养</van-button>
            </div>
        </van-popup>

        <van-popup v-model="showQuestion" position="right" class="questionPop">
            <div class="topQuestion">
                <van-button color="#e6c678" size="small" type="primary" block style="border-radius: 0;"
                    @click="selectQuestion('W')">
                    周保养
                </van-button>
                <van-button color="#e6c678" size="small" type="primary" block style="border-radius: 0;"
                    @click="selectQuestion('M')">
                    月保养
                </van-button>
                <van-button color="#e6c678" size="small" type="primary" block style="border-radius: 0;"
                    @click="selectQuestion('4W')">
                    第四周
                </van-button>
            </div>

            <div class="table">
                <table cellspacing="0">
                    <tr>
                        <th>未保养设备【{{currentQuestion == 'W' ? '周' : '月'}}】</th>
                    </tr>
                    <tr v-if="!questionData.length">
                        <td>暂无更多</td>
                    </tr>
                    <tr v-for="item in questionData" v-if="questionData.length">
                        <td>{{item.EquipmentName}}</td>
                    </tr>
                </table>
            </div>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshDeviceMantain'
        }, function (ret, err) {
            if (ret.value) {
                console.log('value', JSON.stringify(ret.value))
                vm.showNew = true
                vm.newData.EquipmentName = ret.value.change.EquipmentName
                vm.newData.EquipmentID = ret.value.change.EquipmentID

                vm.filterData.EquipmentName = ret.value.change.EquipmentName
                vm.filterData.EquipmentID = ret.value.change.EquipmentID
            }
            vm.getDataList();
        })

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '搜索机台') {
                vm.filterData.EquipmentName = row.EquipmentName;
                vm.filterData.EquipmentID = row.EquipmentID;
            } else if (type == '新增机台') {
                vm.newData.EquipmentName = row.EquipmentName;
                vm.newData.EquipmentID = row.EquipmentID;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                listLoading: false,
                listFinished: true,
                dataList: [],
                showSearch: false,
                filterData: {
                    EquipmentName: api.pageParam.equipment.EquipmentName,
                    EquipmentID: api.pageParam.equipment.EquipmentID,
                    FBDate: getDay(-7),
                    FEDate: getDay(0),
                    pageIndex: 1,
                    pageSize: 20,
                    periodTypeName: '',
                    periodType: ''
                },
                deviceShow: false,
                deviceOctions: [],
                showTime: false,
                currentTimeStr: '',
                currentDate: new Date(),
                showNew: false,
                newData: {
                    BillNO: '自动生成',
                    EquipmentName: api.pageParam.equipment.EquipmentName,
                    EquipmentID: api.pageParam.equipment.EquipmentID,
                    unKeepUserName: window.localStorage.getItem('loginName'),
                    unKeepUserID: window.localStorage.getItem('pin')
                },
                scanShow: false,
                inputCode: '',
                periodTypeShow: false,
                periodTypeOptions: [
                    {
                        name: '周保养',
                        value: 'W'
                    },
                    {
                        name: '月保养',
                        value: 'M'
                    },
                    {
                        name: '第四周',
                        value: '4W'
                    },
                ],
                showQuestion: false,
                questionData: [],
                currentQuestion: 'W'
            },
            created: function () {
                var that = this;

                console.log('checkAPI', JSON.stringify(api.pageParam))
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                that.getDataList();
            },
            methods: {
                handlerQuestion() {
                    var that = this
                    that.selectQuestion('W')
                    that.showQuestion = true
                },

                selectQuestion(str) {
                    var that = this
                    that.currentQuestion = str
                    that.questionData = []
                    APP.ajax('getWBYEqu', { PeriodType: str }, function (res) {
                        console.log('res', JSON.stringify(res))
                        that.questionData = res.ds
                    })
                },

                onSelectPeriodType(val) {
                    var that = this
                    that.filterData.periodTypeName = val.name
                    that.filterData.periodType = val.value
                    that.periodTypeShow = false
                },

                handlerScan() {
                    var that = this
                    that.scanShow = true
                    setInterval(() => {
                        if (that.whetherEquipment) {
                            that.$refs.input.focus()
                            that.$refs.input.setAttribute('readonly', 'readonly');
                            setTimeout(function () {
                                that.$refs.input.removeAttribute('readonly');
                            }, 500);
                        }
                    }, 1500)
                },
                inputFocus() {
                    var that = this
                    // console.log('that.inputCode', JSON.stringify(that.inputCode))
                    APP.ajax('ZS_CardLogin', { P_Card: that.inputCode }, function (res) {
                        // console.log('res', JSON.stringify(res))
                        if (res.ds[0].status == 200) {
                            that.newData.unKeepUserID = res.ds[0].pin
                            that.newData.unKeepUserName = res.ds[0].Name
                            that.scanShow = false
                        } else {
                            vm.$toast(res.ds[0].msg);
                        }
                        that.inputCode = ''
                    })
                },
                addNew() {
                    var that = this
                    that.showNew = true
                },
                saveAdd() {
                    var that = this
                    var obj = {
                        EquipmentID: that.newData.EquipmentID,
                        pin: that.newData.unKeepUserID,
                    }
                    console.log('obj', JSON.stringify(obj))
                    APP.ajax('ZS_EQBYstart', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        if (res.ds[0].status == 500) {
                            vm.$toast(res.ds[0].msg);
                        } else {
                            that.showNew = false
                            that.getDataList()
                        }
                    })
                },
                intoRow(row) {
                    var that = this
                    api.pageParam.historyData = row
                    api.pageParam.filterData = that.filterData
                    // console.log('api.pageParam', JSON.stringify(api.pageParam))
                    api.sendEvent({
                        name: 'resetBreadList',
                        extra: {
                            breadData: {
                                name: '设备保养明细',
                                url: 'deviceMantainDetail',
                                ZS_FunctionID: 0,
                                click: true
                            }
                        }
                    })
                    if (window.localStorage.getItem('clientHeight') != 752) {
                        api.openFrame({
                            name: 'deviceMantainDetail',
                            url: 'deviceMantainDetail.html',
                            rect: {
                                x: 0,
                                y: 115,
                                w: 'auto',
                                h: api.winHeight - 150 - api.safeArea.bottom
                            },
                            bgColor: '#29292a',
                            pageParam: {
                                historyData: row,
                                pageParamMsg: api.pageParam
                            }
                        })
                    } else {
                        api.openFrame({
                            name: 'deviceMantainDetail',
                            url: 'deviceMantainDetail.html',
                            rect: {
                                x: 0,
                                y: 170,
                                w: 'auto',
                                h: api.winHeight - 230 - api.safeArea.bottom
                            },
                            bgColor: '#29292a',
                            pageParam: {
                                historyData: row,
                                pageParamMsg: api.pageParam
                            }
                        })
                    }
                },
                handlerSearch() {
                    var that = this
                    that.filterData.pageIndex = 1
                    that.getDataList()
                    that.showSearch = false
                },
                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    console.log('str', JSON.stringify(str))
                    console.log('机台', JSON.stringify(str.indexOf('机台') != -1))
                    if (str.indexOf('机台') != -1) {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSEquipment',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                handlerTime(time) {
                    var that = this
                    that.currentTimeStr = time
                    that.showTime = true
                },
                confirmTime() {
                    var that = this
                    if (that.currentTimeStr == 'start') {
                        that.filterData.FBDate = APP.getFormatDate(that.currentDate).split(' ')[0]
                    } else {
                        that.filterData.FEDate = APP.getFormatDate(that.currentDate).split(' ')[0]
                    }
                    that.showTime = false
                },
                getDataList: function () {
                    var that = this;
                    that.listLoading = true;
                    that.listFinished = false;
                    // that.filterData.EquipmentID = api.pageParam.EquipmentID
                    console.log('filterData', JSON.stringify(that.filterData))

                    APP.ajax('UpkeepEQ_Head_history_ZS', that.filterData, function (res) {
                        console.log('res', JSON.stringify(res))
                        that.listLoading = false;
                        that.dataList = res.ds;
                        console.log('dataList', JSON.stringify(res.ds))
                    })
                },
                listOnLoad: function () {
                    var that = this;
                    that.filterData.pageIndex++;
                    APP.ajax('UpkeepEQ_Head_history_ZS', that.filterData, function (res) {
                        that.listLoading = false;
                        if (res.ds.length == 0) {
                            that.listFinished = true;
                        }
                        that.dataList = that.dataList.concat(res.ds);
                    })
                },
            }
        })
    };

    function getDay(day) {

        var today = new Date();


        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

        today.setTime(targetday_milliseconds); //注意，这行是关键代码

        var tYear = today.getFullYear();

        var tMonth = today.getMonth();

        var tDate = today.getDate();

        tMonth = doHandleMonth(tMonth + 1);

        tDate = doHandleMonth(tDate);

        return tYear + "-" + tMonth + "-" + tDate;

    }

    function doHandleMonth(month) {

        var m = month;

        if (month.toString().length == 1) {

            m = "0" + month;

        }

        return m;

    }
</script>

</html>